<template>
<el-form :model="form" :rules="rules" ref="form">
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="form.password" placeholder="密码"></el-input>
  </el-form-item>
  <el-form-item prop="isPassing" style="margin-top:10px;border: #ccc solid 1px;border-radius: 4px">
    <drag-verify
        ref="dragVerify"
        :width="334"
        :isPassing.sync="form.isPassing"
        text="请按住滑块拖动"
        successText="验证通过"
        handlerIcon="el-icon-d-arrow-right"
        successIcon="el-icon-circle-check"
        @passcallback="pass"
    >
    </drag-verify>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
  </el-form-item>
</el-form>
</template>

<script>
import dragVerify from 'vue-drag-verify2'
import { setToken } from '@/utils/cookie'

export default {
  name: 'PasswordLogin',
  components: {
    dragVerify
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === false) {
        callback(new Error('请完成图形验证'))
      } else {
        callback()
      }
    }

    return {
      form: {
        username: 'micah',
        password: '12345678',
        isPassing: false
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 8, message: '最少 8 个字符', trigger: 'blur' }
        ],
        isPassing: [
          { validator: validatePass, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    pass () {
      // this.form.isPassing = true
    },

    login () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form.isPassing)
          setToken(123455, { domain: '135680.xyz' })
          window.localStorage.token = 111111
          window.location.href = 'http://135680.xyz'
        } else {
          console.log(this.form.isPassing)
          return false
        }
      })
    }
  },
  updated () {
    this.$refs.form.validateField('isPassing')
  }
}
</script>

<style scoped>

</style>
